
<!--
 * @Author: ranjianglai
 * @Date: 2023-01-12 17:27:41
 * @Description: 我的积分
-->


<template>
    <view class="cus-page">
        <!-- BG -->
		<!-- <image class="bg" src="/static/me/me_head_bg.png" alt=""></image> -->
        <ct-navbar leftIconType="back" title="我的积分" :search="{show:false}" /> 
		<!-- 顶部安全距离 -->
		<u-gap :height="topHeight+'px'" bgColor="transparent"></u-gap>

        <!-- 积分 -->
        <view class="integral t">
            <text style="font-size:84rpx">3388</text>
            <view class="com-flex">
                <view class="circular"><view class="dian"></view></view>
                <text class="com-m-l-12 com-m-r-12 com-font-24">当前可使用积分</text>
                <view class="circular"><view class="dian"></view></view>
            </view>
        </view>
        <!-- 提示 -->
        <view class="com-lh-40 tips t">
            积分详情使用说明，1积分=1日元，可在选择物流方式时抵扣使用，积分可通过升级等级、使用优惠券等方式获取
        </view>
        <!-- 间隔 -->
        <view class="t">
            <u-gap height="20rpx" bgColor="#F8F8F8"></u-gap>
        </view>
        <!-- 积分明细 -->
        <view class="detail t">
            <text class="com-font-32 com-active-color">积分明细</text>
            <view v-for="item in 9" :key="item" class="com-flex com-row-between item">
                <view class="com-flex-col">
                    <text>使用新人注册有礼券</text>
                    <text class="com-m-t-16 com-font-24 com-assist-color">2022-12-16 16:45:27</text>
                </view>
                <text class="com-font-32 com-active-color">+35</text>
            </view>
        </view>
    </view>
</template>


<script>
export default {
    name:'integral',
    components: {},
    props:{},

    data () {
        return {
            topHeight: 44, // 顶部安全距离
        }
    },

    computed: {},
    watch: {},

    onLoad(){
        this.setTopHeight();
    },
    mounted() {},

    methods: {
        // 设置顶部安全距离
		setTopHeight(){
			const sysInfo = this.mixinGetSysInfo();
			const statusBarHeight = sysInfo.statusBarHeight;
			//  #ifdef MP-WEIXIN
			const navBarH = sysInfo.capsule.navBarH;
			this.topHeight = statusBarHeight + navBarH;
			//  #endif
			//  #ifdef APP-PLUS
			this.topHeight = statusBarHeight + 44;
			//  #endif
		},
    },
}
</script>


<style scoped lang='scss'>
    .bg{
		width: 100%;
		height: 380rpx;
		position: fixed;
		top: 0;
		left: 0;
	}
    .integral{
        padding: 56rpx 0;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-image: linear-gradient(to right, #F5F3FD ,#F3F7FD,#EEFDFE,#EEFDFE);
        .circular{
            width: 20rpx;
            height: 20rpx;
            border-radius: 50%;
            border: 1px solid #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            .dian{
                width: 2px;
                height: 2px;
                border-radius: 50%;
                background: #fff;
            }
        }
    }
    .tips{
        padding: 24rpx 32rpx;
        background: #fff;
        font-size: 24rpx;
        color: #FF558F;
    }
    .detail{
        background: #fff;
        padding: 40rpx 32rpx 0;
        .item{
            padding: 28rpx 0;
            border-bottom: 1px solid #F8F8F8;
            &:last-child{
                border: none;
            }
        }
    }
    .t{
        position: relative;
        z-index: 10;
    }
</style>